<template>
	<div class="app-container">
		<div class="table-wrapper">
			<h4>砖混结构破坏状态</h4>
			<el-form :inline="true" ref="formRef" :disabled="route.query.isView&&(route.query.calculateOrNot=='1')" :rules="rules" label-position="right" :model="params" label-width="250px">
				<div class="form-inline">
					<el-row justify="center">
						<el-col :span="11">
							<el-form-item label="编号：" class="form-item" prop="number">
								<el-input v-model="params.number" placeholder="" :disabled="true" clearable />
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="用途：">
								<el-col :span="12">
									<el-form-item prop="purpose">
										<el-select v-model="params.purpose" placeholder="请选择" class="form-select"
											@change="useChange" clearable>
											<el-option v-for="item in useOptions" :key="item.value" :label="item.label"
												:value="item.value"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="1" class="text-center"><span class="text-gray-500">-</span></el-col>
								<el-col :span="11">
									<el-form-item prop="purpose1">
										<el-select v-model="params.purpose1" placeholder="请选择" class="form-select"
											clearable>
											<el-option v-for="item in use1Options" :key="item.value" :label="item.label"
												:value="item.value"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row justify="center">
						<el-col :span="11">
							<el-form-item label="区域：" class="form-item" prop="province">
								<el-form-item prop="province" style="width:120px;margin-right:10px;">
									<el-select v-model="params.province" placeholder="请选择省" @change="chooseProvince"
										clearable value-key="id" :disabled="!isAdd">
										<el-option v-for="item in provinceData" :key="item.id" :label="item.name"
											:value="item"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item prop="city" style="width:120px;margin-right:10px;">
									<el-select v-model="params.city" placeholder="请选择市" @change="chooseCity" clearable
										value-key="id" :disabled="!isAdd">
										<el-option v-for="item in cityData" :key="item.id" :label="item.name"
											:value="item"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item prop="county" style="width:120px;">
									<el-select v-model="params.county" placeholder="请选择县" @change="chooseCounty" clearable
										value-key="id" :disabled="!isAdd">
										<el-option v-for="item in areaData" :key="item.id" :label="item.name"
											:value="item"></el-option>
									</el-select>
								</el-form-item>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="结构类型：" class="form-item" prop="structureType">
								<el-col :span="12">
									<el-form-item prop="structureType">
										<el-select v-model="params.structureType" placeholder="请选择" class="form-select"
											@change="structureTypeChange" clearable :disabled="!isAdd">
											<el-option v-for="item in structureTypeOptions" :key="item.value"
												:label="item.label" :value="item.value"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="1" class="text-center"><span class="text-gray-500">-</span></el-col>
								<el-col :span="11">
									<el-form-item prop="structureType1">
										<el-select v-model="params.structureType1" placeholder="请选择" class="form-select"
											clearable :disabled="!isAdd">
											<el-option v-for="item in structureType1Options" :key="item.value"
												:label="item.label" :value="item.value"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-form-item>
						</el-col>
					</el-row>
					<!-- <el-row justify="center">
						<el-col :span="11">
							<el-form-item label="建筑物编号：" class="form-item" prop="buildingNumber">
								<el-input type="number" v-model="params.buildingNumber" placeholder="请输入" :disabled="!isAdd" clearable />
							</el-form-item>
						</el-col>
						<el-col :span="11">
						</el-col>
					</el-row> -->
					<el-row justify="center">
						<el-col :span="11">
							<el-form-item label="设防情况：" class="form-item" prop="fortification">
								<el-select v-model="params.fortification" placeholder="请选择" class="form-select" clearable
									:disabled="!isAdd">
									<el-option v-for="item in fortificationOptions" :key="item.value" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="建造年代：" class="form-item" prop="years">
								<el-select v-model="params.years" placeholder="请选择" class="form-select" :disabled="!isAdd"
									clearable>
									<el-option v-for="item in yearsOptions" :key="item.value" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row justify="center">
						<el-col :span="11">
							<el-form-item label="层数：" class="form-item" prop="floor">
								<!-- <el-input-number v-model="params.floor" :min="0" :max="99999" placeholder="请输入" clearable /> -->
								<el-select v-model="params.floor" placeholder="请选择" class="form-select" clearable>
									<el-option v-for="item in csOptions" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="总楼层数（n）：" class="form-item" prop="totalFloor">
								<el-input-number v-model="params.totalFloor" :min="1" :max="99999" placeholder="请输入"
									@change="onChangeTotalFloor" clearable />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row justify="center">
						<el-col :span="11">
							<el-form-item label="外墙厚度：" class="form-item" prop="outThickness">
								<el-input-number v-model="params.outThickness" :min="0" :max="99999" placeholder="请输入"
									clearable />
								(mm)
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="内墙厚度：" class="form-item" prop="innerThickness">
								<el-input-number v-model="params.innerThickness" :min="0" :max="99999" placeholder="请输入"
									clearable />
								(mm)
							</el-form-item>
						</el-col>
					</el-row>
					<!-- <el-row justify="center">
						<el-col :span="11">
							<el-form-item label="层宽：" class="form-item" prop="width">
								<el-input-number v-model="params.width" :min="0" :max="99999" placeholder="请输入" clearable />
								(m)
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="层长：" class="form-item" prop="length">
								<el-input-number v-model="params.length" :min="0" :max="99999" placeholder="请输入"
									clearable />
								(m)
							</el-form-item>
						</el-col>
					</el-row>
					<el-row justify="center">
						<el-col :span="11">
							<el-form-item label="楼层对应的砂浆强度（M）：" class="form-item" prop="mortar">
								<el-input-number v-model="params.mortar" :min="0" :max="99999" placeholder="请输入"
									clearable />
								(m)
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="墙体截面积（Fi）：" class="form-item" prop="sectionArea">
								<el-input-number v-model="params.sectionArea" :min="0" :max="99999" placeholder="请输入"
									clearable />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row justify="center">
						<el-col :span="11">
							<el-form-item label="楼层建筑面积（As）：" class="form-item" prop="buildArea">
								<el-input-number v-model="params.buildArea" :min="0" :max="99999" placeholder="请输入"
									clearable />
							</el-form-item>
						</el-col>
						<el-col :span="11"></el-col>
					</el-row> -->
					<!-- <el-row justify="center">
						<el-col :span="11">
							<el-form-item label="操作人：" class="form-item" prop="userName"><el-input v-model="params.userName"
									placeholder="" clearable /></el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="操作时间:">
								<el-form-item prop="createTime">
									<el-date-picker clearable v-model="params.createTime" type="datetime" placeholder="操作时间"
										value-format="YYYY-MM-DD hh:mm:ss" />
								</el-form-item>
							</el-form-item>
						</el-col>
					</el-row> -->
					<!-- <el-row justify="center">
						<el-col :span="22">
							<el-form-item label="操作人所属单位：" class="form-item" prop="maintainerUnit" style="width: 100%;">
								<el-input v-model="params.maintainerUnit" placeholder="" clearable />
							</el-form-item>
						</el-col>
					</el-row> -->
					<el-row justify="center">
						<el-col :span="22">
							<el-form-item label="备注说明：" class="form-item" prop="remark" style="width: 100%;">
								<el-input type="textarea" v-model="params.commentInfo" placeholder="请输入" clearable />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row justify="center">
						<el-col :span="22">
							<el-form-item label="附件：" class="form-item" prop="fileList" style="width: 100%;">
								<!-- 文件上传组件 -->
								<FileUpload v-model="params.fileList" @uploadFileCallback="uploadFileCallback"
									@delFile="delFileCallback"></FileUpload>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row justify="end" v-if="params.calculateOrNot != '1'">
						<el-form-item class="bottom-button">
							<el-popover placement="top-start" title="提示" :width="200" trigger="hover"
								content="计算结果不保存，若需要保存，请计算完成后点击页面“保存”按钮进行保存！">
								<template #reference>
									<el-button type="primary" @click="onRecalculate(formRef)"><el-icon>
											<EditPen />
										</el-icon>计算</el-button>
								</template>
							</el-popover>
							<el-button type="primary" @click="onSave(formRef)"><el-icon><Select /></el-icon>保存</el-button>
							<el-button @click="onRest(formRef)"><el-icon>
									<Refresh />
								</el-icon>重置</el-button>
						</el-form-item>
					</el-row>
				</div>
			</el-form>

			<!-- 表格0 -->
			<el-form :inline="true" ref="formFloorRef" :disabled="route.query.isView&&(route.query.calculateOrNot=='1')" :rules="rules" label-position="right" :model="tableData0" label-width="250px" class="page-panel">
				<el-row justify="end" v-if="params.calculateOrNot != '1'">
					<el-form-item class="bottom-button">
						<el-button type="primary" @click="onForAllFloors(formFloorRef)">将首层输入值用于所有楼层</el-button>
					</el-form-item>
				</el-row>
				<el-table class="listTable" ref="table1Ref" border :data="tableData0" style="width: 100%"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column prop="floorNumber" width="120" label="层数" header-align="center" align="center">
						<template #default="scope">
							<el-form-item :prop="scope.$index + '.floorNumber'" :rules="rules.floorNumber">
								<el-input type="number" v-model="scope.row.floorNumber" :min="0" placeholder="" maxlength="10" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="length" label="层长/m" header-align="center" align="center">
						<template #default="scope">
							<el-form-item :prop="scope.$index + '.length'" :rules="rules.length">
								<el-input type="number" v-model="scope.row.length" :min="0" placeholder="" maxlength="10" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="width" label="层宽/m" header-align="center" align="center">
						<template #default="scope">
							<el-form-item :prop="scope.$index + '.width'" :rules="rules.width">
								<el-input type="number" v-model="scope.row.width" :min="0" placeholder="" maxlength="10" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="sectionArea" label="墙体截面积（Fi）/cm²" header-align="center" align="center">
						<template #default="scope">
							<el-form-item :prop="scope.$index + '.sectionArea'" :rules="rules.sectionArea">
								<el-input type="number" v-model="scope.row.sectionArea" :min="0" placeholder="" maxlength="10" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="buildArea" label="楼层建筑面积（As）/cm²" header-align="center" align="center">
						<template #default="scope">
							<el-form-item :prop="scope.$index + '.buildArea'" :rules="rules.buildArea">
								<el-input type="number" v-model="scope.row.buildArea" :min="0" placeholder="" maxlength="10" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="mortar" label="楼层对应的砂浆强度（M）" header-align="center" align="center">
						<template #default="scope">
							<el-form-item :prop="scope.$index + '.mortar'" :rules="rules.mortar">
								<el-input type="number" v-model="scope.row.mortar" :min="0" placeholder="" maxlength="10" />
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form>

			<!-- 表格1 -->
			<div class="page-panel">
				<el-table class="listTable" ref="table1Ref" border :data="tableData1" style="width: 100%"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column prop="cs" width="120" label="层数" header-align="center" align="center">
						<template #default="{ row }">{{ row.cs }}</template>
					</el-table-column>
					<el-table-column prop="qtkjcd" header-align="center" align="center">
						<template #header>
							<div class="color-red">墙体抗剪程度</div>
							<!-- 公式 -->
							<Formula display="block" :option="[
								{ content: 'R' },
								{ content: 'τ', scale: 0.6, position: 'bottom' },
								{ content: '(S)' },
								{ content: '=' },
								{ content: '0.14' },
								{ content: '(n-s+1)' },
								{ content: '+' },
								{ content: '0.014' },
								{ content: 'R' },
								{ content: 'm', scale: 0.6, position: 'bottom' },
								{ content: '+' },
								{ content: '0.5' }
							]"></Formula>
						</template>
						<template #default="{ row }">{{ row.qtkjcd }}</template>
					</el-table-column>
					<el-table-column prop="dzjlzsxs" header-align="center" align="center">
						<template #header>
							<div class="color-red">地震剪力折算系数</div>
							<!-- 多行公式 -->
							<MultilineFormula display="block" :option="[
								{ content: 'α' },
								{ content: '(S)' },
								{ content: '=' },
								{ rows: [[{ content: '2n+1' }], [{ content: '3' }, { content: '∑', scale: 1.5, topContent: 'n', bottomContent: 'i=s' }, { content: 'i' }]] }
							]"></MultilineFormula>
						</template>
						<template #default="{ row }">{{ row.dzjlzsxs }}</template>
					</el-table-column>
					<el-table-column prop="resistanceForce" header-align="center" align="center">
						<template #header>
							<div class="color-red">抗力</div>
							<!-- 多行公式 -->
							<MultilineFormula display="block" :option="[
								{ content: 'R' },
								{ content: 'S', scale: 0.6, position: 'bottom' },
								{ content: '=' },
								{ content: 'α' },
								{ content: '(S) ' },
								{
									rows: [
										[{ content: '∑', scale: 1.2 }, { content: 'F' }, { content: 'S', scale: 0.6, position: 'bottom' }],
										[{ content: '2' }, { content: 'A' }, { content: 'S', scale: 0.6, position: 'bottom' }]
									]
								},
								{ content: ' R' },
								{ content: 'τ', scale: 0.6, position: 'bottom' },
								{ content: '(S)' }
							]"></MultilineFormula>
						</template>
						<template #default="{ row }">{{ row.resistanceForce }}</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 表格2 -->
			<div class="page-panel">
				<h4 class="color-red">不同破坏状态（6、7、8、9、10）每层抗震指数【未修正情况】</h4>
				<el-table class="listTable" ref="table2Ref" border :data="tableData2" style="width: 100%"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column prop="cs" width="80" label="层数" header-align="center" align="center"></el-table-column>
					<el-table-column prop="d6" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<Formula display="block" :option="[
								{ content: 'D' },
								{ content: 's', scale: 0.6, position: 'bottom' },
								{ content: '(6)' },
								{ content: '=' },
								{ content: '2.032' },
								{ content: '-' },
								{ content: '0.007' },
								{ content: 'R' },
								{ content: 's', scale: 0.6, position: 'bottom' }
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column prop="d7" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<Formula display="block" :option="[
								{ content: 'D' },
								{ content: 's', scale: 0.6, position: 'bottom' },
								{ content: '(7)' },
								{ content: '=' },
								{ content: '1.977' },
								{ content: '-' },
								{ content: '0.006' },
								{ content: 'R' },
								{ content: 's', scale: 0.6, position: 'bottom' }
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column prop="d8" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<Formula display="block" :option="[
								{ content: 'D' },
								{ content: 's', scale: 0.6, position: 'bottom' },
								{ content: '(8)' },
								{ content: '=' },
								{ content: '1.975' },
								{ content: '-' },
								{ content: '0.005' },
								{ content: 'R' },
								{ content: 's', scale: 0.6, position: 'bottom' }
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column prop="d9" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<Formula display="block" :option="[
								{ content: 'D' },
								{ content: 's', scale: 0.6, position: 'bottom' },
								{ content: '(9)' },
								{ content: '=' },
								{ content: '1.866' },
								{ content: '-' },
								{ content: '0.004' },
								{ content: 'R' },
								{ content: 's', scale: 0.6, position: 'bottom' }
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column prop="d10" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<Formula display="block" :option="[
								{ content: 'D' },
								{ content: 's', scale: 0.6, position: 'bottom' },
								{ content: '(10)' },
								{ content: '=' },
								{ content: '1.740' },
								{ content: '-' },
								{ content: '0.003' },
								{ content: 'R' },
								{ content: 's', scale: 0.6, position: 'bottom' }
							]"></Formula>
						</template>
					</el-table-column>
				</el-table>
				<p class="be-careful">注：如果不同破坏状态下存在等于或者小于零的数值时，需将抗震指数Dsm修正为0.05</p>
			</div>

			<!-- 表格3 -->
			<div class="page-panel">
				<p>选择<span class="color-red">修正系数Ci</span>完成对抗震指数的修正</p>
				<!-- <el-table class="listTable" ref="ciTableRef" border :data="tableDataCi" style="width: 100%"
					@row-click="handleRowClick" @selection-change="handleSelectionChange" @select="handleSelect"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column type="selection" width="55" />
					<el-table-column prop="condition" label="条件" header-align="center" align="left"></el-table-column>
					<el-table-column prop="ci" width="400" label="修正系数Ci" header-align="center" align="center">
						<el-table-column v-for="(item, index) in tableCiColumn" :key="index" :prop="'content' + item.cbrsId"
							:label="item.info" width="200" />
					</el-table-column>
				</el-table> -->
				<el-form class="ci-form" ref="ciFormRef" :disabled="route.query.isView&&(route.query.calculateOrNot=='1')" :rules="rules" label-position="left" :model="params"
					label-width="220px">
					<el-form-item :label="'（1）' + params.ciType1" class="form-item" prop="ciType1Value">
						<el-radio-group v-model="params.ciType1Value">
							<el-radio :label="1">有</el-radio>
							<el-radio :label="2">无</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item :label="'（2）' + params.ciType2" class="form-item" prop="ciType2Value">
						<el-radio-group v-model="params.ciType2Value">
							<el-radio :label="1">规则</el-radio>
							<el-radio :label="2">不规则</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item :label="'（3）' + params.ciType3" prop="ciType3Value">
						<el-select v-model="params.ciType3Value" placeholder="请选择" class="form-select" clearable
							style="width: 480px;">
							<el-option v-for="item in standardOptions" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-row justify="start">
						<el-col :span="10">
							<el-form-item :label="'（4）' + params.ciType4" class="form-item" prop="ciType4Value">
								<el-select v-model="params.ciType4Value" placeholder="请选择" class="form-select" clearable
									style="width: 320px;">
									<el-option v-for="item in roofTypeOptions" :key="item.value" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="承重墙间距/m：" prop="spacing" label-width="130px">
								<el-input-number v-model="params.spacing" placeholder="请输入数值" clearable />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>

			<!-- 表格4 -->
			<div class="page-panel">
				<h4 class="color-red">不同破坏状态（6、7、8、9、10）每层抗震指数【修正情况】
					<!-- 公式 -->
					<Formula color="#333333" :option="[
						{ content: 'D' },
						{ content: 'sm', scale: 0.6, position: 'bottom' },
						{ content: '(I)' },
						{ content: '=' },
						{ content: 'D' },
						{ content: 's', scale: 0.6, position: 'bottom' },
						{ content: '(I)' },
						{ content: '[' },
						{ content: '1' },
						{ content: '+' },
						{ content: '∑', scale: 1 },
						{ content: 'C', scale: 1.2 },
						{ content: 'i', scale: 0.6, position: 'bottom' },
						{ content: ']' },
					]"></Formula>
				</h4>
				<el-table class="listTable" ref="table4Ref" border :data="tableData3" style="width: 100%"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column prop="cs" width="120" label="层数" header-align="center"
						align="center"></el-table-column>
					<el-table-column prop="degree6" label="6度" header-align="center" align="center"></el-table-column>
					<el-table-column prop="degree7" label="7度" header-align="center" align="center"></el-table-column>
					<el-table-column prop="degree8" label="8度" header-align="center" align="center"></el-table-column>
					<el-table-column prop="degree9" label="9度" header-align="center" align="center"></el-table-column>
					<el-table-column prop="degree10" label="10度" header-align="center" align="center"></el-table-column>
				</el-table>
				<p class="be-careful">注：如果不同破坏状态下存在等于或者小于零的数值时，需将抗震指数Dsm修正为0.05</p>
			</div>

			<!-- 表格5 -->
			<div class="page-panel">
				<h1>预测结果如下：</h1>
				<el-table class="lirstTable" ref="table5Ref" border :data="tableData4" style="width: 100%"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column prop="breakState" width="80" label="破坏状态" header-align="center"
						align="center"></el-table-column>
					<el-table-column v-for="(item, index) in (params.totalFloor || 4)" :key="index" :prop="'f' + item"
						:label="item + '层'" header-align="center" align="center" min-width="200"></el-table-column>
					<!-- <el-table-column :prop="null" label="" header-align="center" align="center" width="400"></el-table-column> -->
				</el-table>
			</div>

			<!-- 表格6 -->
			<div class="page-panel">
				<el-table class="lirstTable" ref="table6Ref" border :data="tableData5" style="width: 100%"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column prop="breakState" width="80" label="破坏状态" header-align="center"
						align="center"></el-table-column>
					<el-table-column v-for="(item, index) in (params.totalFloor || 4)" :key="index" :prop="'floor' + item"
						:label="item + '层'" header-align="center" align="center" min-width="200"></el-table-column>
					<el-table-column prop="conclusion" label="结论" header-align="center" align="center"></el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, toRefs } from 'vue';
// 引入store
import useUserStore from '@/store/modules/user';
import useDictStore from '@/store/modules/dict';
// 获取用户信息
import { getInfo } from '@/api/login';
// 引入砖混结构接口
import {
	brickStateGetByIdApi,//根据id获取信息
	brickStateGetCiApi,//获取砖砌体结构抗力修正系数Ci值
	brickStateSaveApi,//保存
	brickStateCalculationApi,//计算
	getDataById //回显
} from "@/api/buildingVulnerAnalysis/buildingVulnerAnalysis.js";
// 引入行政区划接口
import { getProvince, getChildArea } from '@/api/system/division';
// 引入公式组件
import Formula from '@/components/Formula';
import MultilineFormula from '@/components/Formula/multiline';

// 获取当前实例
const { proxy } = getCurrentInstance();
// 获取pinia
const userStore = useUserStore();
const dictStore = useDictStore();
// 当前路由对象
const route = useRoute();

// 是否是新增页，有路由参数是详情页，否则是新增页
let isAdd = computed(() => (route.query.id ? false : true));
// 用户名
const userName = computed(() => userStore.name || '');
// 所属机构名称
const orgName = computed(() => userStore.orgName || '');

// 表单对象
const formRef = ref();
// 楼层表格表单对象
const formFloorRef = ref();
// Ci系数表单对象
const ciFormRef = ref();
// ci参数表格
const ciTableRef = ref();

const data = reactive({
	// 表单参数
	params: {
		calculateOrNot: '0', //是否已计算（默认0：未计算，1：已计算）
		"number": '',
		"region": '', //区域
		"purpose": "", //用途
		"purpose1": "", //用途
		"province": "", //省
		"city": "", //市
		"county": "", //区县
		"structureType": "", //结构类型
		"structureType1": '',
		"fortification": "", //设防情况
		"years": "", //建造年代
		// "buildingNumber": '', // 建筑物编号

		"floor": '', //层数
		"totalFloor": 0, //总楼层数
		"outThickness": 0.0, //外墙厚度
		"innerThickness": 0.0, //内墙厚度
		// "mortar": 0, //楼层对应的砂浆强度（M）
		// "width": 0.0, //层宽
		// "length": 0.0, //层长
		// "sectionArea": 0.0, //墙体截面积
		// "buildArea": 0.0, //建筑面积

		// userName: userName.value, //操作人
		// maintainerUnit: orgName.value, //操作人所属单位
		userName: '', //操作人
		maintainerUnit: '', //操作人所属单位
		createTime: '', //操作开始时间

		correctionCoefficient: '', // Ci值

		commentInfo: '', // 备注
		annex: '', //附件id，','隔开
		annexNameList: [],
		fileList: [], //附件列表

		// Ci系数表单
		ciType1: '结构无明显质量问题',
		ciType1Value: undefined,
		ciType2: '平立面规则',
		ciType2Value: undefined,
		ciType3: '建筑抗震设计规范',
		ciType3Value: undefined,
		ciType4: '楼屋盖类型',
		ciType4Value: undefined,
		// 承重墙间距
		spacing: undefined,
	},
	// 表单验证规则
	rules: {
		// 基础表单验证规则
		province: [{ required: true, message: '请选择', trigger: 'change' }],
		structureType: [{ required: true, message: '请选择', trigger: 'change' }],
		structureType1: [{ required: true, message: '请选择', trigger: 'change' }],
		fortification: [{ required: true, message: '请选择', trigger: 'change' }],
		years: [{ required: true, message: '请选择', trigger: 'change' }],
		floor: [{ required: true, message: '请输入', trigger: 'blur' }],
		floorNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
		length: [{ required: true, message: '请输入', trigger: 'blur' }],
		width: [{ required: true, message: '请输入', trigger: 'blur' }],
		sectionArea: [{ required: true, message: '请输入', trigger: 'blur' }],
		buildArea: [{ required: true, message: '请输入', trigger: 'blur' }],
		mortar: [{ required: true, message: '请输入', trigger: 'blur' }],
		// buildingNumber: [{ required: true, message: '请输入', trigger: 'blur' }],

		// Ci系数表单验证规则
		ciType1Value: [{ required: true, message: '请选择', trigger: 'change' }],
		ciType2Value: [{ required: true, message: '请选择', trigger: 'change' }],
		ciType3Value: [{ required: true, message: '请选择', trigger: 'change' }],
		ciType4Value: [{ required: true, message: '请选择', trigger: 'change' }],
		spacing: [{ required: true, message: '请输入', trigger: 'blur' }],
	},
	// 设防情况
	fortificationOptions: dictStore.fortificationOptions || [],
	// 年份
	yearsOptions: dictStore.yearsOptions || [],
	// 层数
	csOptions: dictStore.csOptions.filter((item,index)=>index<2) || [],
	// 结构类型
	structureTypeOptions: dictStore.structureTypeOptions1 || [],
	structureType1Options: [],
	// 用途
	useOptions: dictStore.useOptions || [],
	use1Options: [],
	// 建筑抗震设计规范预选项
	standardOptions: [
		{
			value: 1,
			label: '①符合建筑抗震设计规范（GBJ 11-89）',
		},
		{
			value: 2,
			label: '②符合《工业与民用建筑抗震设计规范（TJ11-78）》要求',
		},
		{
			value: 3,
			label: '③符合《工业与民用建筑抗震设计规范（TJ11-74）》要求，不符合②',
		},
		{
			value: 4,
			label: '④符合建筑抗震设计规范（GB50011）',
		},
		{
			value: 5,
			label: '⑤其他',
		},
	],
	// 楼屋盖类型预选项
	roofTypeOptions: [
		{
			value: 1,
			label: '现浇或装配整体式钢筋混凝土楼、屋盖',
		},
		{
			value: 2,
			label: '装配式钢筋混凝土楼、屋盖',
		},
		{
			value: 3,
			label: '木屋盖',
		},
		{
			value: 4,
			label: '其他',
		},
	],

	//表格, 表格0、1、2、4使用一个表格
	tableData0: [
		{
			// "cs": 0, //层数
			// "mortar": 0, //楼层对应的砂浆强度（M）
			// "width": 0.0, //层宽
			// "length": 0.0, //层长
			// "sectionArea": 0.0, //墙体截面积
			// "buildArea": 0.0, //建筑面积
		}
	],
	tableData1: [
		// {
		// 	"cs": 0, //层数
		// 	"qtkjcd": 0.0, //墙体抗剪程度
		// 	"dzjlzsxs": 0.0, //地震剪力折算系数
		// 	"resistanceForce": 0.0, //抗力
		// }
	],
	tableData2: [
		// {
		// 	"cs": 0, //层数
		// 	"d7": 0.0, //未修正情况
		// 	"d8": 0.0, //未修正情况
		// 	"d9": 0.0, //未修正情况
		// 	"d10": 0.0, //未修正情况
		// }
	],
	tableData3: [
		// {
		// 	"cs": 0, //层数
		// 	"degree7": 0.0, //修正情况
		// 	"degree8": 0.0, //修正情况
		// 	"degree9": 0.0, //修正情况
		// 	"degree10": 0.0, //修正情况
		// }
	],
	tableData4: [
		// {
		// 	"breakState": "", //破坏状态
		// 	"f1": 0.0, //1层
		// 	"f2": 0.0, //2层
		// 	"f3": 0.0, //3层
		// 	"f4": 0.0, //4层
		// }
	],
	tableData5: [
		// {
		// 	"breakState": "", //破坏状态
		// 	"floor1": 0.0, //1层
		// 	"floor2": 0.0, //2层
		// 	"floor3": 0.0, //3层
		// 	"floor4": 0.0, //4层
		// 	"conclusion": 0.0, //结论
		// }
	],
	tableDataCi: [
		// { id: 1, condition: '（1）墙的间距符合现行抗震设计规范要求', content: '0', discontent: '0.10' },
		// { id: 2, condition: '（2）刚性楼屋盖', content: '0', discontent: '0.15' },
		// { id: 3, condition: '（3）结构无明显质量问题', content: '0', discontent: '0.20' },
		// { id: 4, condition: '（4）平立面规则', content: '0', discontent: '0.10' },
		// { id: 5, condition: '（5）符合《工业与民用建筑抗震设计规范（TJ11-78）》要求', content: '-0.35', discontent: '0' },
		// { id: 6, condition: '（6）符合《工业与民用建筑抗震设计规范（TJ11-74）》要求，不符合（5）', content: '-0.20', discontent: '0' },
	],
	// 修正系数Ci的表头列
	tableCiColumn: [],
	// 修正系数Ci的原始数据
	ciData: [],
	// 修正系数Ci的表格选中行
	multipleSelection: [],
	// 当前行数据
	curTableRow: {},
});

const {
	// 表单数据
	params,
	// 表单验证规则
	rules,
	// 设防情况选项
	fortificationOptions,
	// 年份选项
	yearsOptions,
	// 层数选项
	csOptions,
	// 结构类型选项
	structureTypeOptions,
	structureType1Options,
	// 用途选项
	useOptions,
	use1Options,
	// 建筑抗震设计规范预选项
	standardOptions,
	// 楼屋盖类型预选项
	roofTypeOptions,

	// 表格数据
	tableData0,
	tableData1,
	tableData2,
	tableData3,
	tableData4,
	tableData5,
	tableDataCi,
	tableCiColumn,
	ciData,
	// 表格选中行
	multipleSelection,
	// 当前行数据
	curTableRow
} = toRefs(data);

// 行政区划选择
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
/** 获取省列表 */
function getProvinceData() {
	getProvince().then(response => {
		provinceData.value = response.data;
	});
}
// 选择省份
function chooseProvince(value) {
	params.value.city = null;
	params.value.county = null;
	params.value.province = value.name;
	cityData.value = [];
	areaData.value = [];
	getChildArea(value.id).then(response => {
		cityData.value = response.data;
	});
}
// 选择城市
function chooseCity(value) {
	params.value.city = value.name;
	params.value.county = null;
	areaData.value = [];
	getChildArea(value.id).then(response => {
		areaData.value = response.data;
	});
}
// 选择区县
function chooseCounty(value) {
	params.value.county = value.name;
}

// 结构类型选择
const structureTypeChange = val => {
	const structureTypes = structureTypeOptions.value.find(item => item.value === val);
	if (structureTypes) {
		structureType1Options.value = structureTypes.children;
	}
};
// 选择用途
const useChange = val => {
	const use = useOptions.value.find(item => item.value === val);
	if (use) {
		use1Options.value = use.children;
	}
};
// 总楼层数改变事件监听
function onChangeTotalFloor(val) {
	if (val < 4) {
		params.value.floor = csOptions.value[0].value; // 1-3
	} else if (val < 9) {
		params.value.floor = csOptions.value[1].value; // 4-8
	} else {
		params.value.floor = csOptions.value[2].value; // 9-
	}
	// 未计算, 设置楼层表格数据行数
	if(params.value.calculateOrNot != '1') {
		if(val <= tableData0.value.length) {
			tableData0.value.length = val;
		} else {
			const len = val - tableData0.value.length;
			for (let i = 0; i < len; i++) {
				tableData0.value.push({});
			}
		}
	}
}
// 附件上传回调
function uploadFileCallback(val) {
	if (val && val.length) {
		val.map(item => {
			params.value.fileList.push({
				...item,
				attachName: item.attachName || item.name
			});
		})
	} else {
		params.value.fileList = [];
	}
	// 附件
	if (params.value.fileList && params.value.fileList.length) {
		const arrAttachId = [];
		const arrAttachName = [];
		params.value.fileList.map(item => {
			arrAttachId.push(item.attachId);
			arrAttachName.push(item.attachName);
		});
		params.value.annex = arrAttachId.join(',');
		params.value.annexNameList = arrAttachName;
	}
}
// 附件删除回调
function delFileCallback(index) {
	if (index && params.value.fileList) params.value.fileList.splice(index, 1);
}

// 初始化获取数据
const getData = () => {
	if (!route.query.id) { return; }
	const query = {
		id: route.query.id
	};
	brickStateGetByIdApi(query).then(res => {
		const { code, data, message } = res;
		if (code === 200 && data) {
			// 根据查询或计算结果回显数据 
			setData(data);
		} else {
			tableData0.value = [];
			tableData1.value = [];
			tableData2.value = [];
			tableData3.value = [];
			tableData4.value = [];
			tableData5.value = [];
			proxy.$modal.msgWarning(message || "获取详情失败！");
		}
	}).catch(err => {
		proxy.$modal.msgWarning(err.message || "获取详情失败！");
	});
};
// 根据查询或计算结果回显数据
function setData(data) {
	const { entity, data1, data2, data3, data4, data5, ciIds, detailList } = data;
	// 基础参数
	if (entity) {
		params.value = {
			...entity,
			ciIds: ciIds || '',
		};
		// 附件
		params.value.fileList = [];
		if (entity.annex) {
			const arrAttachId = entity.annex.split(',');
			if (arrAttachId && arrAttachId.length && entity.annexNameList && entity.annexNameList.length) {
				arrAttachId.map((item, index) => {
					params.value.fileList.push({
						attachId: item,
						attachName: entity.annexNameList[index]
					});
				});
			}
		}
		if (entity.createUser) {
			// 获取用户
			getUserInfo(entity.createUser);
		}
	}
	// 每层楼层属性
	if (detailList && detailList.length) {
		tableData0.value = [...detailList];
	} else {
		tableData0.value = [];
	}
	// 墙体抗剪程度、地震剪力折算系数、抗力
	if (data1 && data1.length) {
		tableData1.value = [...data1];
	} else {
		tableData1.value = [];
	}
	// 每层抗震指数【未修正情况】
	if (data2 && data2.length) {
		tableData2.value = [...data2];
	} else {
		tableData2.value = [];
	}
	// 每层抗震指数【修正情况】
	if (data3 && data3.length) {
		tableData3.value = [...data3];
	} else {
		tableData3.value = [];
	}
	// 预测结果
	if (data4 && data4.length) {
		tableData4.value = [...data4];
	} else {
		tableData4.value = [];
	}
	if (data5 && data5.length) {
		tableData5.value = [...data5];
	} else {
		tableData5.value = [];
	}
}
// 获取砖砌体结构抗力修正系数Ci值
function getCiData() {
	brickStateGetCiApi({
		titleName: '砖砌体结构抗力修正系数Ci值',
	}).then(res => {
		const { code, data, message } = res;
		if (code === 200 && data) {
			const { dynamicFieldsEntity, zqtEntity } = data;
			// 存ci列和值
			tableCiColumn.value = dynamicFieldsEntity || [];
			ciData.value = zqtEntity || [];
			// 选中的Ci值
			const arrCheckedCi = (params.value.correctionCoefficient || '').split(',');
			multipleSelection.value.length = 0;
			// 修正系数表格数据
			tableDataCi.value.length = 0;
			let arrConditions = [];
			if (zqtEntity && zqtEntity.length) {
				zqtEntity.map((item, index) => {
					if (item.condition) {
						// 不包含则添加
						if (!arrConditions.includes(item.condition)) {
							arrConditions.push(item.condition);
							var curObj = { ...item };
							zqtEntity.filter(item1 => item1.condition == item.condition).map(item1 => {
								// 设置列的值
								curObj['content' + item1.projectId] = item1.ciValue;
							})
							tableDataCi.value.push({
								...curObj,
							});
						}
					}
				})
				// 表格渲染后设置选中状态
				nextTick(() => {
					tableDataCi.value.map(item => {
						// 如果包含id则选中
						if (arrCheckedCi.includes(item.cbrmId) && ciTableRef.value && ciTableRef.value.toggleRowSelection) {
							// 设置选中效果
							ciTableRef.value.toggleRowSelection(item, true);
						}
					});
				})
			}
		} else {
			tableDataCi.value = [];
		}
	});
};
// 获取用户
function getUserInfo(userId) {
	getInfo(userId).then(response => {
		params.value.userName = response.user.userName
		params.value.maintainerUnit = response.user.orgName
		//params.value.createTime = parseTime(new Date())
	});
};

// 表格点击选中行事件
function handleRowClick(row) {
	curTableRow.value = row;
	if (ciTableRef.value && ciTableRef.value.toggleRowSelection) {
		// 设置选中效果
		ciTableRef.value.toggleRowSelection(row);
	}
}
// 表格行复选框勾选事件
function handleSelect(selection, row) {
	curTableRow.value = row;
}
// 表格多选事件
function handleSelectionChange(val) {
	// 处理标准只选一个标准
	if (curTableRow.value.condition && curTableRow.value.condition.match(/^符合.*/gi)) {
		multipleSelection.value = val.filter(item => {
			// 过滤选中数据
			if (item.condition && item.condition.match(/^符合.*/gi) && curTableRow.value.condition != item.condition) {
				// 取消选中效果
				if (ciTableRef.value && ciTableRef.value.toggleRowSelection) {
					ciTableRef.value.toggleRowSelection(item, false);
				}
				return false;
			} else {
				return true;
			}
		});
	} else {
		multipleSelection.value = val;
	}
}

// 设置接口参数
function setApiParams() {
	// 选中Ci值
	// const ciValues = [];
	// if (multipleSelection.value && multipleSelection.value.length) {
	// 	multipleSelection.value.map((item, index) => {
	// 		ciData.value.map((item1, index1) => {
	// 			if (item.condition == item1.condition) {
	// 				ciValues.push(item1.cbrmId);
	// 			}
	// 		});
	// 	});
	// }
	return {
		// "cbcpInfoEntity": {
		"cbcbInfoEntity": {
			...params.value,
			// Ci值
			// correctionCoefficient: ciValues.join(','),
			// 2023-08-04房屋修正系数Ci选择调整，需要把ciId返回
			correctionCoefficient: params.value.ciIds || '',
		},
		// 楼层列表
		detailList: tableData0.value||[],
	};
}
// 将首层输入值用于所有楼层
const onForAllFloors = async (formEl) => {
	if (!formEl) return;
	// 表单验证
	// const formElValid = await formEl.validate((valid, fields) => { valid, fields });
	if(tableData0.value.length>1){
		if(tableData0.value.length) {
			let firstRow = tableData0.value[0];
			let arr = [];
			tableData0.value.map((item, index) => {
				arr.push({
					// 信息覆盖
					...firstRow,
					// 楼层号不变
					floorNumber: item.floorNumber || (index + 1)
				})
			});
			tableData0.value = arr;
		}
	}
}
//计算
const onRecalculate = async formEl => {
	if (!formEl) return;
	// 表单验证
	const formElValid = await formEl.validate((valid, fields) => { valid, fields });
	const floorRefElValid = await formFloorRef.value.validate((valid, fields) => { valid, fields });
	// Ci表单验证
	const ciFormElValid = await ciFormRef.value.validate((valid, fields) => { valid, fields });
	// 判断验证结果
	if (ciFormElValid && formElValid && floorRefElValid) {
		// 接口参数
		const apiParams = setApiParams();
		proxy.$modal.loading('正在努力计算,请耐心等待！');
		//计算
		brickStateCalculationApi(apiParams).then(res => {
			proxy.$modal.closeLoading();
			const { code, data, message } = res;
			if (code == 200) {
				proxy.$modal.msgSuccess('计算成功！计算结果未保存，若需保存结果，请计算后点击保存按钮！');
				// 根据查询或计算结果回显数据
				setData(data);
			}
		}).catch(err => {
			proxy.$modal.closeLoading();
			proxy.$modal.msgWarning(err.message || '计算失败！');
		})
	} else {
		proxy.$modal.msgWarning('表单验证失败，请检测填写数据！');
	}
};
/** 保存成功返回查询页 */
function close() {
  const obj = { path: "/buildingVulnerAnalysis/statisticalAnalysis/brickState/brickInquire" };
  proxy.$tab.closeOpenPage(obj);
};
//保存
const onSave = async formEl => {
	if (!formEl) return;
	// 表单验证
	const formElValid = await formEl.validate((valid, fields) => { valid, fields });
	const floorRefElValid = await formFloorRef.value.validate((valid, fields) => { valid, fields });
	// Ci表单验证
	const ciFormElValid = await ciFormRef.value.validate((valid, fields) => { valid, fields });
	// 判断验证结果
	if (ciFormElValid && formElValid && floorRefElValid) {
		// 设置接口参数
		const apiParams = setApiParams();
		// 计算结果
		let arrCalcList = [];
		if (tableData1.value.length && tableData2.value.length && tableData3.value.length) {
			tableData1.value.map((item, index) => {
				arrCalcList.push({
					...item,
					...tableData2.value[index],
					...tableData3.value[index],
				})
			})
		}
		let arrResults = [];
		if (tableData4.value.length && tableData5.value.length) {
			tableData4.value.map((item, index) => {
				const resultItem = tableData5.value[index];
				const objData1 = { ...item };
				const objData2 = { ...resultItem };
				arrResults.push({
					breakState: item.breakState,
					jsonData1: JSON.stringify(objData1),
					jsonData2: JSON.stringify(objData2),
					conclusion: resultItem && resultItem.conclusion ? resultItem.conclusion : ''
				})
			})
		}
		//保存
		brickStateSaveApi({
			// 基础数据
			...apiParams,
			// 砖混结构破坏计算列表
			"brickConcreteDestroyCalcList": arrCalcList,
			// 砖混结构破坏计算结果列表
			"brickConcreteDestroyResults": arrResults,
		}).then(res => {
			const { code, data, message } = res;
			if (code == 200 && data) {
				proxy.$modal.msgSuccess('保存成功！');
				close()
				// 是否计算状态修改为已计算
				params.value.calculateOrNot = '1';
			}
		}).catch(err => {
			proxy.$modal.msgWarning(err.message || '保存失败！');
		})
	} else {
		proxy.$modal.msgWarning('表单验证失败，请检测填写数据！');
	}
};
//重置
const onRest = formEl => {
	// 重置表单，方式一
	formEl.resetFields();
	// 重置表单，方式二
	// proxy.resetForm('formRef');
};
// 查询数据
const onSearch = () => {
	const query = {
		number: route.query.number,
		dataType: route.query.dataType,
		dataId: route.query.pid,
	};
	getDataById(query).then(res => {
		const { code, data, message } = res;
		if (code === 200 && data) {
			// 根据查询或计算结果回显数据
			setData(data);
		} else {
			tableData1.value = [];
			tableData2.value = [];
			tableData3.value = [];
			tableData4.value = [];
			tableData5.value = [];
			proxy.$modal.msgWarning(message || "获取详情失败！");
		}
	}).catch(err => {
		console.log(err);
	});
};

// 挂载
onMounted(async () => {
	// 只有一个结构类型，默认选中
	if (structureTypeOptions.value?.length) {
		params.value.structureType = structureTypeOptions.value[0].value || '';
		params.value.structureType1 = structureTypeOptions.value[0].children[0].value || '';
	}
	// 根据参数判断获取数据的方式
	const isLook = route.query.isLook
	if (isLook) {
		// 初始化获取数据，回显
		onSearch();
	} else {
		// 新增页
		if (isAdd.value) {
			// 获取登录用户信息
			params.value.userName = userName.value;
			params.value.maintainerUnit = orgName.value;
		}
		// 初始化获取数据
		await getData();
	}
	// 获取行政区划数据
	getProvinceData();
	// 获取砖砌体结构抗力修正系数Ci值
	// getCiData();
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

/* 页面标题 */
.table-wrapper {
	position: relative;

	h4 {
		font-size: 16px;
		font-weight: bold;
		color: #107ce5;
		text-align: center;
	}
}

/* 表单\描述区域底部边距 */
.el-descriptions,
.el-form {
	margin-bottom: 20px;
}

.bottom-button {
	margin-right: 0;
}

.ci-form {
	padding: 0 50px;
}

.form-inline {
	.el-form-item {
		margin-right: 0;
	}
}

/* 数字输入框宽度 */
.el-input-number {
	width: 200px;
}

th.el-table__cell>.cell {
	>div:first-child {
		line-height: 40px;
	}
}

.page-panel {
	margin-top: 40px;
}

// 字体红色
.color-red {
	color: red !important;
}

// 注
.be-careful {
	text-align: center;
	color: red;
}
</style>
